<style lang="less">
</style>

<template>
	<div class="rich-text-editor-vue">
	</div>
</template>

<script>
	import WangEditor from 'wangeditor';
	//import '../../css/richtext-editor.less';
	import qiniujs from 'qiniu-js-es6';
	export default {
		name: 'RichTextEditor',
		props: {
			value: {
				type: String,
				default: ''
			},
			type: {
				type: String,
				default: 'html' // html, text
			},
			cache: {
				type: Boolean,
				default: true // 是否开启本地存储
			}
		},
		data() {
			return {
				stashValue: this.value
			};
		},
		methods: {
			setHtml(val) {
				this.editor.txt.html(val);
			},
			init() {
				let that = this
				// 获取相关 DOM 节点的 ID
				let btnId = this.editor.imgMenuId
				let containerId = this.editor.toolbarElemId
				let textElemId = this.editor.textElemId
				// 创建上传对象
				let uploader = qiniujs.Qiniu.uploader({
					runtimes: 'html5', //上传模式,依次退化
					browse_button: btnId, //上传选择的点选按钮，**必需**
					//uptoken_url: 'https://www.huantu.cc/qnuptoken',
					//Ajax请求upToken的Url，**强烈建议设置**（服务端提供）
					uptoken: this.$global.config.uptoken,
					//若未指定uptoken_url,则必须指定 uptoken ,uptoken由其他程序生成
					unique_names: true,
					// 默认 false，key为文件名。若开启该选项，SDK会为每个文件自动生成key（文件名）
					// save_key: true,
					// 默认 false。若在服务端生成uptoken的上传策略中指定了 `sava_key`，则开启，SDK在前端将不对key进行任何处理
					domain: 'http://qn.huantu.cc/',
					//bucket 域名，下载资源时用到，**必需**
					container: containerId, //上传区域DOM ID，默认是browser_button的父元素，
					max_file_size: '5mb', //最大文件体积限制
					filters: {
						mime_types: [
							//只允许上传图片文件 （注意，extensions中，逗号后面不要加空格）
							{
								title: "图片文件",
								extensions: "jpg,gif,png,bmp"
							}
						]
					},
					max_retries: 3, //上传失败最大重试次数
					dragdrop: true, //开启可拖曳上传
					drop_element: textElemId, //拖曳上传区域元素的ID，拖曳文件或文件夹后可触发上传
					chunk_size: '1mb', //分块上传时，每片的体积
					auto_start: true, //选择文件后自动上传，若关闭需要自己绑定事件触发上传.
					init: {
						FileUploaded(up, file, info) {
							// 每个文件上传成功后,处理相关的事情
							// 其中 info 是文件上传成功后，服务端返回的json，形式如
							// {
							//    "hash": "Fh8xVqod2MQ1mocfI4S4KpRL6D98",
							//    "key": "gogopher.jpg"
							//  }
							// 参考http://developer.qiniu.com/docs/v6/api/overview/up/response/simple-response.html
							let domain = up.getOption('domain')
							//console.log(info)
							let res = JSON.parse(info.response)
							let sourceLink = domain + res.key //获取上传成功后的文件的Url
							// 插入图片到editor
							that.editor.cmd.do('insertHtml', '<img src="' + sourceLink + '" style="max-width:100%;"/>')
						}
					}
				})
			}
		},
		watch: {
			value() {
				if (this.editor && this.value != this.stashValue) {
					if (this.value == null) {
						this.editor.txt.clear();
					} else {
						this.editor.txt.html(this.value);
					}
				}
			}
		},
		mounted() {
			this.editor = new WangEditor(this.$el);
			this.editor.customConfig.qiniu = true
			// 开启图片复制
			//this.editor.customConfig.uploadImgShowBase64 = true;
			this.editor.customConfig.onchange = (html) => {
				html = html.replace(/_(\w*).webp/g,'');
				let text = this.editor.txt.text();
				if (this.cache) localStorage.editorCache = html;
				let value = this.stashValue = this.type === 'html' ? html : text;
				this.$emit('input', value);
				this.$emit('change', html, text);
				// let imgReg = /<img.*?(?:>|\/>)/gi
				// let srcReg = /src=[\'\"]?([^\'\"]*)[\'\"]?/i
				// let imgs = html.match(imgReg)
				// let srcs = []
				// imgs.forEach(item => {
				// 	srcs.push(item.match(srcReg)[1])
				// })
				//console.log(srcs)
			};
			this.editor.customConfig.linkImgCallback = (url) => {
				console.log(url)
			}
			this.editor.create();
			let html = this.value || localStorage.editorCache;
			if (html) this.editor.txt.html(html);
			this.init()
		}
	};
</script>
